<template>
	<echartTitle title="近十日桥梁险情变化" />
	<Echarts ref="zhu" :option="option" width="100%" height="100%" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { reactive,onMounted } from 'vue';
import Echarts from '../../../components/echarts/index.vue'
import echartTitle from '../../../components/echartTitle/index.vue';
import { list } from '@/api/swimming/plan/index'

const zhu=ref()

let option = reactive({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true
			}
		},
		backgroundColor: "rgba(0,0,0,.6)",
		textStyle: {
			color: "#FFF",
		},
	},
	legend: {
		data: ['险情数'],
		top: '4%',
		textStyle: {
			color: "white"
		},
		fontSize: 10,
		selected: { 昨日使用率: false } // 不需要显示的设置为false
	},
	xAxis: {
		data: [
			'2024-5-29',
			'2024-5-30',
			'2024-5-31',
			'2024-6-1',
			'2024-6-2',
			'2024-6-3',
			'2024-6-4',
			'2024-6-5',
			'2024-6-6',
			'2024-6-7'
		],
		axisLine: {
			show: true, //隐藏X轴轴线
			lineStyle: {
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
			show: true,
			fontSize: 12,
			fontWeight: 500,
			color: "white"
		}
	},
	yAxis: [
		{
			type: 'value',
			name: '人数',
			nameTextStyle: {
				color: 'white',
				fontSize: 9
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true,
				fontSize: 10,
				color: "white"
			}
		}
	],
	series: [
		{
			name: '险情数',
			type: 'line',
			smooth: true,
			symbol: "none",
			areaStyle: {
				normal: {
					//右，下，左，上
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(255,1,60,1)",
							},
							{
								offset: 1,
								color: "rgba(255,120,120,0.7)",
							},
						],
						false
					),
				},
			},
			color: "#F56C6C",
			data: [80, 70, 43, 35, 76, 60, 30, 42, 22,10]
		},
	]
});

const init=(dateList:Array<string>,swimList:Array<number>,readyList:Array<number>)=>{
	option={
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true
			}
		},
		backgroundColor: "rgba(0,0,0,.6)",
		textStyle: {
			color: "#FFF",
		},
	},
	legend: {
		data: ['险情数'],
		top: '4%',
		textStyle: {
			color: "white"
		},
		fontSize: 10,
		selected: { 昨日使用率: false } // 不需要显示的设置为false
	},
	xAxis: {
		data: dateList,
		axisLine: {
			show: true, //隐藏X轴轴线
			lineStyle: {
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
			show: true,
			fontSize: 12,
			fontWeight: 500,
			color: "white"
		}
	},
	yAxis: [
		{
			type: 'value',
			name: '人数',
			nameTextStyle: {
				color: 'white',
				fontSize: 9
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true,
				fontSize: 10,
				color: "white"
			}
		}
	],
	series: [
		{
			name: '险情数',
			type: 'line',
			smooth: true,
			symbol: "none",
			areaStyle: {
				normal: {
					//右，下，左，上
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(255,1,60,1)",
							},
							{
								offset: 1,
								color: "rgba(255,120,120,0.7)",
							},
						],
						false
					),
				},
			},
			color: "#F56C6C",
			data: swimList
		},

	]
}
}

const getData=async()=>{
	var res=await list()
	console.log(res.data);
	console.log(res.data['dateList']);
	init(res.data['dateList'],res.data['swimList'],res.data['readyList'])
	zhu.value.setData(option)
}

onMounted(()=>{
	getData()
})
</script>